<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>失物招领管理系统</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1890FF',
secondary: '#4B5563'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<style>
body { min-height: 1024px; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.fa, .fas, .far { display: flex; justify-content: center; align-items: center; }
</style>
</head>
<body class="bg-gray-100">
<div class="flex h-screen">
<aside class="w-[200px] bg-white shadow-md fixed h-full">
<div class="p-4 border-b border-gray-200">
<div class="text-xl font-bold text-primary">失物招领管理系统</div>
</div>
<nav class="mt-4">
<a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50">
<i class="fas fa-users w-5 h-5"></i>
<span class="ml-3">用户管理</span>
</a>
<a href="#" class="flex items-center px-4 py-3 bg-primary bg-opacity-10 text-primary">
<i class="fas fa-box-open w-5 h-5"></i>
<span class="ml-3">失物管理</span>
</a>
<a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50">
<i class="fas fa-chart-bar w-5 h-5"></i>
<span class="ml-3">统计报表</span>
</a>
</nav>
</aside>
<div class="flex-1 ml-[200px]">
<header class="h-16 bg-white shadow-sm fixed top-0 right-0 left-[200px] z-10 flex items-center justify-between px-6">
<div class="flex items-center">
<i class="fas fa-bars text-gray-400 w-5 h-5"></i>
</div>
<div class="flex items-center space-x-4">
<i class="far fa-bell text-gray-400 w-5 h-5"></i>
<div class="flex items-center">
<img src="https://ai-public.mastergo.com/ai/img_res/fcc1977c31be6201ab799225ba1023b0.jpg"
class="w-8 h-8 rounded-full" alt="avatar">
<span class="ml-2 text-gray-600">管理员</span>
</div>
<button class="text-gray-600 hover:text-primary !rounded-button">
<i class="fas fa-sign-out-alt w-5 h-5"></i>
</button>
</div>
</header>
<main class="pt-24 px-6 pb-6">
<div class="mb-6 flex justify-between items-center">
<h1 class="text-2xl font-bold text-gray-800">失物管理</h1>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="搜索失物" class="pl-10 pr-4 py-2 border border-gray-300 rounded-button w-64 text-sm">
<i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4"></i>
</div>
<button class="px-4 py-2 bg-primary text-white !rounded-button whitespace-nowrap">
<i class="fas fa-plus mr-2 w-4 h-4"></i>登记失物
</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm">
<div class="p-6">
<table class="w-full">
<thead>
<tr class="border-b">
<th class="pb-4 text-left font-medium text-gray-600">物品名称</th>
<th class="pb-4 text-left font-medium text-gray-600">类型</th>
<th class="pb-4 text-left font-medium text-gray-600">拾获地点</th>
<th class="pb-4 text-left font-medium text-gray-600">拾获时间</th>
<th class="pb-4 text-left font-medium text-gray-600">状态</th>
<th class="pb-4 text-left font-medium text-gray-600">操作</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="py-4">MacBook Pro</td>
<td>电子设备</td>
<td>图书馆二楼</td>
<td>2023-06-15 14:30</td>
<td><span class="px-2 py-1 bg-yellow-100 text-yellow-600 rounded-full text-sm">待认领</span></td>
<td class="space-x-2">
<button class="text-primary hover:text-primary-dark !rounded-button">
<i class="fas fa-edit w-4 h-4"></i>
</button>
<button class="text-green-500 hover:text-green-600 !rounded-button">
<i class="fas fa-check w-4 h-4"></i>
</button>
</td>
</tr>
<tr class="border-b">
<td class="py-4">学生证</td>
<td>证件卡片</td>
<td>教学楼A区</td>
<td>2023-06-14 09:15</td>
<td><span class="px-2 py-1 bg-green-100 text-green-600 rounded-full text-sm">已认领</span></td>
<td class="space-x-2">
<button class="text-primary hover:text-primary-dark !rounded-button">
<i class="fas fa-edit w-4 h-4"></i>
</button>
<button class="text-gray-500 hover:text-gray-600 !rounded-button">
<i class="fas fa-check w-4 h-4"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t flex items-center justify-between">
<span class="text-gray-600 text-sm">共 24 条记录</span>
<div class="flex items-center space-x-2">
<button class="px-3 py-1 border !rounded-button text-gray-600 hover:border-primary hover:text-primary disabled:opacity-50" disabled>上一页</button>
<button class="px-3 py-1 border !rounded-button bg-primary text-white">1</button>
<button class="px-3 py-1 border !rounded-button text-gray-600 hover:border-primary hover:text-primary">2</button>
<button class="px-3 py-1 border !rounded-button text-gray-600 hover:border-primary hover:text-primary">3</button>
<button class="px-3 py-1 border !rounded-button text-gray-600 hover:border-primary hover:text-primary">下一页</button>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-6 mt-6">
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-medium text-gray-800 mb-4">每日登记数量</h3>
<div id="userChart" style="height: 300px;"></div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-medium text-gray-800 mb-4">物品类型分布</h3>
<div id="typeChart" style="height: 300px;"></div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-medium text-gray-800 mb-4">认领成功率</h3>
<div id="efficiencyChart" style="height: 300px;"></div>
</div>
</div>
</main>
</div>
</div>
<script>
const userChart = echarts.init(document.getElementById('userChart'));
userChart.setOption({
animation: false,
tooltip: { trigger: 'axis' },
xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
yAxis: { type: 'value' },
series: [{
data: [15, 18, 12, 20, 16, 8, 10],
type: 'line',
smooth: true,
name: '登记数量',
itemStyle: {
color: '#1890FF'
}
}]
});
const typeChart = echarts.init(document.getElementById('typeChart'));
typeChart.setOption({
animation: false,
tooltip: { trigger: 'item' },
series: [{
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '电子设备' },
{ value: 735, name: '证件卡片' },
{ value: 580, name: '书籍资料' },
{ value: 484, name: '生活用品' },
{ value: 300, name: '其他' }
]
}]
});
const efficiencyChart = echarts.init(document.getElementById('efficiencyChart'));
efficiencyChart.setOption({
animation: false,
tooltip: { trigger: 'axis' },
xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
yAxis: { 
type: 'value',
axisLabel: {
formatter: '{value}%'
}
},
series: [{
data: [85, 90, 87, 95, 92, 88],
type: 'bar',
name: '认领率',
itemStyle: {
color: '#1890FF'
}
}]
});
</script>
</body>
</html>
